import { FC } from 'react'
import { Empty, Spin, Typography } from 'antd'

import styles from './common.module.scss'
import QuestionCard from '../../components/QuestionCard'
import ListSearch from '../../components/ListSearch'
import useLoadQuestionListData from './hooks/useLoadQuestionListData'
import ListPage from '../../components/ListPage'

const { Title } = Typography

const Star: FC = () => {
  // const [questionList] = useState(rawQuestionList)

  const { data, loading } = useLoadQuestionListData({ isStar: true })
  const { list: questionList, total } = data || {}

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
        {!loading &&
          questionList?.length > 0 &&
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          questionList.map((p: any) => {
            const { _id: id } = p
            return <QuestionCard key={id} {...p} />
          })}
        {!loading && questionList?.length === 0 && <Empty description="暂无数据" />}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} />
      </div>
    </>
  )
}

export default Star
